<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="form">
      <el-form-item label="角色名称">
        <el-input v-model="form.roleName" placeholder="请输入角色名称" />
      </el-form-item>
      <el-form-item label="角色编码">
        <el-input v-model="form.roleCode" placeholder="请输入角色编码" />
      </el-form-item>
      <el-form-item style="float: right">
        <el-button type="success" v-if="$formatFR(roleManage.add)" @click="handleAdd"
          >新增</el-button
        >
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%" row-key="id">
      <el-table-column type="index" label="序号" width="50" align="center" />
      <el-table-column label="角色名称" prop="roleName" align="center" />
      <el-table-column label="角色编码" prop="roleCode" align="center" />
      <el-table-column label="角色描述" prop="remark" align="center" show-overflow-tooltip />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="mini"
            v-if="$formatFR(roleManage.edit)"
            plain
            @click="handleEditor(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="mini"
            v-if="$formatFR(roleManage.del)"
            plain
            @click="handleDel(scope.row.id)"
            >删除</el-button
          >

          <el-dropdown
            size="mini"
            class="dropdown"
            v-if="!(!$formatFR(roleManage.data) && !$formatFR(roleManage.func))"
          >
            <span class="el-dropdown-link"
              ><el-button type="primary" size="mini" plain>权限</el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-if="$formatFR(roleManage.func)"
                command="handleJobLog"
                icon="el-icon-s-operation"
                @click.native="handleRoleFeature(scope.row)"
                ><p class="dropdown-item-p">功能权限</p></el-dropdown-item
              >
              <el-dropdown-item
                @click.native="handleRoleData(scope.row)"
                icon="el-icon-caret-right"
                v-if="$formatFR(roleManage.data)"
                ><p class="dropdown-item-p">数据权限</p></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <base-pagination
      :size="form.size"
      :current="form.current"
      :total="total"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></base-pagination>
    <!-- 弹窗角色 -->
    <AddEditDialog ref="AddEditDialog" @updatePage="reset" />
    <RoleFeatureDialog ref="RoleFeatureDialog" />
    <RoleDataDialog ref="RoleDataDialog" @updatePage="reset" />
  </el-card>
</template>

<script>
import { rolePage, del } from "@/api/system/role"
import AddEditDialog from "./components/AddEditDialog"
import RoleFeatureDialog from "./components/RoleFeatureDialog.vue"
import RoleDataDialog from "./components/RoleDataDialog.vue"
import FUNCROLELIST from "@/utils/func_role/system"
export default {
  components: {
    AddEditDialog,
    RoleFeatureDialog,
    RoleDataDialog
  },
  data() {
    return {
      roleManage: FUNCROLELIST.role,
      form: {
        roleName: "",
        roleCode: "",
        size: 10,
        current: 1
      },
      total: 0,
      tableData: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    reset() {
      this.form = {
        roleName: "",
        roleCode: "",
        size: 10,
        current: 1
      }
      this.getList()
    },
    handleSizeChange(val) {
      this.form.size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.form.current = val
      this.getList()
    },
    handleAdd() {
      this.$refs.AddEditDialog.init(null, "新增")
    },
    handleRoleData(scope) {
      this.$refs.RoleDataDialog.init(scope)
    },
    handleRoleFeature(scope) {
      this.$refs.RoleFeatureDialog.init(scope)
    },
    // 删除角色
    handleDel(id) {
      this.$confirm("请确认是否删除当前角色?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        del(id).then(() => {
          this.getList()
          this.$message({
            type: "success",
            message: "删除成功!"
          })
        })
      })
    },
    // 编辑角色
    handleEditor(scope) {
      this.$refs.AddEditDialog.init(scope, "编辑")
    },
    // 搜索角色
    search() {
      this.form.current = 1
      this.getList()
    },

    // 获取角色列表
    async getList() {
      const { data } = await rolePage(this.form)
      this.tableData = data.records
      this.total = data.total
    }
  }
}
</script>

<style lang="scss" scoped>
.dropdown-item-p {
  display: inline;
}
.dropdown {
  margin-left: 10px;
}
</style>
